<template>
    <div class="bor-line"></div>
    <div ref="chartDom" class="chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
import * as echarts from 'echarts/core';
import type { EChartsOption } from 'echarts';

import variables from '../../variables.less?raw';

function getLessVariable(varName: string): string {
    const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
    return match ? match[1].trim() : 'rgb(140, 173, 197)';
}

const chartDom = ref<HTMLElement | null>(null);

const myChart = shallowRef<echarts.ECharts | null>(null);

const deptNames = [
    '党群监察部', '科技教育中心', '发展艺术中心', '视觉艺术中心',
    '校区管理部', '实践教育中心', '财务部', '人力资源部',
    '数字管理部', '办公室'
];
const deptStaffFullTimeData = [12, 8, 20, 15, 25, 14, 6, 18, 10, 4];
const deptStaffPartTimeData = [3, 2, 5, 5, 5, 4, 2, 4, 2, 1];

const axisLineColor = getLessVariable('axis-line-color');
const textColor = getLessVariable('text-color');
const fullTimeColor = getLessVariable('dept-staff-full-color');
const partTimeColor = getLessVariable('dept-staff-part-color');

const option: EChartsOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(3, 28, 66, 0.9)',
        borderColor: axisLineColor,
        textStyle: { color: '#fff' },
        formatter: (params: any) => {
            let tooltipStr = `${params[0].name}<br/>`;
            let total = 0;
            params.forEach((item: any) => {
                tooltipStr += `${item.marker}${item.seriesName}: ${item.value}人<br/>`;
                total += item.value || 0;
            });
            tooltipStr += `总计: ${total}人`;
            return tooltipStr;
        }
    },
    legend: {
        data: ['全职', '兼职'],
        orient: 'vertical',
        right: '10%',
        top: 'center',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: { color: textColor, fontSize: 12 }
    },
    grid: {
        left: '3%', right: '25%', bottom: '3%', top: '5%', containLabel: true
    },
    xAxis: {
        type: 'value', axisLabel: { show: true, color: "rgb(140, 173, 197)" }, axisLine: { show: false },
        axisTick: { show: false }, splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: "#ffffff40"
            }
        }
    },
    yAxis: {
        type: 'category', data: deptNames,
        axisLabel: {
            color: "rgb(140, 173, 197)", fontSize: 12,
            formatter: (value: string) => value.length > 6 ? value.slice(0, 5) + '...' : value
        },
        axisLine: { show: true, lineStyle: { color: axisLineColor } },
        axisTick: { show: false }, inverse: true,
    },
    dataZoom: [
        {
            type: 'slider',
            yAxisIndex: 0,
            startValue: 0,
            endValue: 5,
            width: 10,
            right: 0,
            bottom: 20,
            handleSize: '100%',
            handleStyle: {
                color: '#4682B4',
            },
            borderColor: 'transparent',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            dataBackground: {
                lineStyle: { color: 'transparent' },
                areaStyle: { color: 'transparent' },
            },
            selectedDataBackground: {
                lineStyle: { color: 'transparent' },
                areaStyle: { color: 'transparent' },
            },
            fillerColor: 'rgba(70, 130, 180, 0.4)',
            textStyle: { color: textColor },
            brushSelect: false
        },
        {
            type: 'inside',
            yAxisIndex: 0,
        }
    ],
    series: [
        {
            name: '全职', type: 'bar', stack: 'total', barWidth: 15,
            barGap: '30',
            emphasis: { focus: 'series' }, itemStyle: { color: fullTimeColor },
            label: {
                show: false, position: 'inside', fontSize: 10, color: '#000',
                formatter: (params: any) => params.value > 0 ? params.value : ''
            },
            data: deptStaffFullTimeData
        },
        {
            name: '兼职', type: 'bar', stack: 'total', barWidth:  15,
            barGap: '30',
            emphasis: { focus: 'series' }, itemStyle: { color: partTimeColor },
            label: {
                show: false, position: 'inside', fontSize: 10, color: '#fff',
                formatter: (params: any) => params.value > 0 ? params.value : ''
            },
            data: deptStaffPartTimeData
        }
    ]
};

const resizeChart = () => {
    myChart.value?.resize();
};

onMounted(() => {
    if (chartDom.value) {
        myChart.value = echarts.init(chartDom.value);
        myChart.value.setOption(option);
        window.addEventListener('resize', resizeChart);
    }
});

onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose(); // Dispose chart instance
});

</script>

<style lang="less" scoped>
// .chart-container is defined globally or can be styled here if needed
.chart-container {
    width: 100%;
    height: 100%; // Make sure it fills the panel content area
}

.bor-line {
    border: 2px dashed #233460;
    height: 260px;
    width: 410px;
    position: absolute;
    background: rgba(45, 58, 103, .5);
}
</style>